<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>axios基本使用</title>
        <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.24.0/axios.min.js"></script>
    </head>
    <body>
        <button>点击发送 GET 请求</button>
        <button>点击发送 POST 请求</button>
        <button>点击发送 PUT 请求</button>
        <button>点击发送 DELETE 请求</button>
        <hr />
        <button>async 和 await 的使用</button>
        <button>简便使用方式</button>
        <script>
            //获取元素
            let btns = document.querySelectorAll("button");

            // 第六个按钮
            btns[5].onclick =async function(){
                // get 
                // let res = await axios(url [, 配置对象]);
                let res = await axios('http://127.0.0.1:8090/server', {
                    params: {
                        a: 100,
                        b: 200
                    }
                });
                console.log(res);
            }

            //第五个按钮  **********
            btns[4].onclick = async function () {
                try {
                    let res = await axios({
                        url: "http://127.0.0.1:8090/server",
                    });
                    //异步任务成功的回调位置
                    console.log(res);
                } catch (e) {
                    //异步任务失败的回调位置
                    console.dir(e);
                }
            };

            //第一个按钮绑定   测试
            btns[0].onclick = function () {
                //发送 AJAX 请求   参数: 配置对象
                axios({
                    //请求类型     method 方法
                    method: "get", //不区分大小写
                    //URL    必填项
                    url: "http://127.0.0.1:8090/server",
                    //查询字符串
                    params: {
                        type: "法师",
                        vip: 1,
                        a: 200,
                    },
                    //设置请求头
                    headers: {
                        b: 300,
                        e: 400,
                        f: 500,
                    },
                }).then(
                    (response) => {
                        console.log(response);
                        // console.log(response.data);
                    },
                    (error) => {
                        console.dir(error);
                    }
                );
            };

            //第二个按钮
            btns[1].onclick = function () {
                axios({
                    method: "post",
                    url: "http://127.0.0.1:8090/server",
                    //请求体
                    // data: 'a=100&b=200'  // form-data
                    data: {
                        c: 100,
                        d: 200,
                    },
                }).then((res) => {
                    console.log(res);
                });
            };

            //第三个按钮
            btns[2].onclick = function () {
                axios({
                    method: "put",
                    url: "http://127.0.0.1:8090/server",
                });
            };

            //第四个按钮
            btns[3].onclick = function () {
                axios({
                    method: "delete",
                    url: "http://127.0.0.1:8090/server",
                });
            };
        </script>
    </body>
</html>
